import { PureComponent } from 'react'
import { Button, Input, Select } from 'antd'
import SingleTable from 'components/table/index'
import SetOderModal from 'components/modal/setOderModal'
import styles from './setOder.less'
const { Option} = Select
export default class SetOder extends PureComponent {
  state = {
    showModal: false
  }
  // 显示modal
  renderModal = () => {
    const { showModal }  = this.state
    return(
      <SetOderModal  
      showModal={showModal} 
      onOk={this.handleOk}
      onCancel={this.handleCancel}
      />
    )
  }
  // 确定
  handleOk = () => {
    this.setState({ showModal: false })

  }
  // 取消
  handleCancel = () => {
    this.setState({ showModal: false })
  }
  // 面单单号绑定
  handleAdd = () => {
    this.setState({ showModal: true })
  }
  render(){
    const dataList = []
    const columns = [
      {
        key: 'gmtCreate',
        title: '派送运单号',
        dataIndex: 'gmtCreate',
        align: 'center',
      },
      {
        key: 'operationTypeName',
        title: '派送公司',
        dataIndex: 'operationTypeName',
        align: 'center',
      },
      {
        key: 'creatorName',
        title: '创建时间',
        dataIndex: 'creatorName',
        align: 'center',
      },
      {
        key: '4',
        title: '转运单号',
        dataIndex: 'creatorName',
        align: 'center',
      },
      {
        key: '5',
        title: '国内运单号',
        dataIndex: 'creatorName',
        align: 'center',
      },
      {
        key: '6',
        title: '始发港',
        dataIndex: 'creatorName',
        align: 'center',
      },
      {
        key: '7',
        title: '目的港',
        dataIndex: 'creatorName',
        align: 'center',
      },
    ]
    return(
      <div className={styles.setOder}>
        <div className={styles.setOderBox}>
          <h2>派送运单数据</h2>
          <div className={styles.setOderBoxSearch}>
              <div className={styles.setOderSearchSin}>
                <span className={styles.spanContext}>收运时间：</span>
                <Input className={styles.setOderInput} />
              </div>
              <div className={styles.setOderSearchSin} style={{margin: '0 20px'}}>
                <span className={styles.spanContext}>派送运单号：</span>
                <Input className={styles.setOderInput} />
              </div>
              <div className={styles.setOderSearchSin}>
                <span className={styles.spanContext}>派送公司：</span>
                <Select defaultValue="lucy" className={styles.setOderInput} >
                  <Option value="jack">Jack</Option>
                  <Option value="lucy">Lucy</Option>
                  <Option value="Yiminghe">yiminghe</Option>
                </Select>
              </div>
              <div className={styles.setOderSearchSin} style={{marginLeft: '20px'}}>
                <span className={styles.spanContext} style={{width: '104px'}}>派送运单状态：</span>
                <Select defaultValue="lucy" className={styles.setOderInput} >
                  <Option value="jack">Jack</Option>
                  <Option value="lucy">Lucy</Option>
                  <Option value="Yiminghe">yiminghe</Option>
                </Select>
              </div>
          </div>
          <Button type="primary" style={{margin: '24px 0 0 24px'}}>查询</Button>
          <Button style={{marginLeft: '24px'}} onClick={this.handleAdd}>Redpack面单单号绑定</Button>
          <div className={styles.setOderTable}>
          <SingleTable
            data={{ list: dataList }}
            columns={columns}
            
          />
          </div>
        </div>
        {this.renderModal()}
      </div>
    )
  }
}